<template>
    <div class="detailNavBar">
        <nav-bar>
            <template v-slot:left>
                <div class="back" @click="backClick">
                    <img src="~assets/img/common/back.svg" alt=""/>
                </div>
            </template>
            <template v-slot:center>
                <div class="title">
                    <div v-for="(item,index) in titles" class="title-item" :key="index"
                    :class="{actived:index===currentIndex}"
                    @click="itemClick(index)">
                        {{item}}
                    </div>
                </div>
            </template>
        </nav-bar>
    </div>
</template>

<script>
    import NavBar from 'components/common/navbar/NavBar'
    export default {
        name: "DetailNavBar",
        data() {
            return {
                titles:['商品','参数','评论','推荐'],
                currentIndex:0
            }
        },
        components:{
            NavBar
        },
        methods:{
            backClick() {
                this.$router.back();
            },
            itemClick(index) {
                this.currentIndex = index
                this.$emit('titleClick',index)
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        font-size: 15px;
    }
    .title .title-item {
        flex: 1;
    }
    .actived {
        color: var(--color-high-text);
    }
    .back img {
        margin-top: 10px;
    }
</style>